<template>
  <div class="szjjsecongpagefencompanydialog">
    <div @click.prevent="changeradio" style="margin-left: 10px; width: 5%">
      <el-radio v-model="radioV" label="1" v-if="radioV == '1'"
        >显示数据</el-radio
      >
      <el-radio v-model="radioV" label="3" v-else>显示数据</el-radio>
    </div>
    <div style="" class="maindiv">
      <div class="maindivsamll" style="width: 25%; margin-right: 3%">
        <div class="szjytitle">
          <div class="szjytitletext"></div>
          <p>贵单位采购情况</p>
          <!-- <div class="jiantoudatepiacker">
            <YYDatePick
              v-model="gdwcgqkdatepicker"
              :to-body="false"
              type="year"
              :popper-options="{ placement: 'bottom' }"
              arrow 
            ></YYDatePick>
          </div> -->
          <div class="style1">
            <dataPicker
              v-model="gdwcgqkdatepicker"
              type="year"
              value-format="yyyy"
              placeholder="请选择"
              :editable="false"
              prefix-icon="1"
            />
          </div>
          <!-- @arrowClick="arrowClick" -->

          <!-- <div class="datepicker">
            <el-date-picker
             :editable="false"
              value-format="yyyy"
              v-model="gdwcgqkdatepicker"
              type="year"
              placeholder="选择日期"
              prefix-icon=""
              clearable
            ></el-date-picker>
          </div> -->
        </div>
        <div
          style="height: 70%; padding-left: 10%"
          class="szjyleftbottomechartheight"
        >
          <div class="topdetail4" style="width: 100%; height: 37%">
            <div style="width: 100%">
              <p class="fontstyle" id="ljcgjefgs" style="font-size: 2.7rem">
                {{ szjymesinfo.ljcgje || 0 }}
              </p>
              <div class="gridimgmoney" style=""></div>
              <p class="fontstyle2">累计采购金额</p>
            </div>
          </div>
          <div class="topdetail4" style="width: 100%; height: 37%">
            <div style="width: 100%">
              <p class="fontstyle" id="ljcgbsfgs" style="font-size: 2.7rem">
                {{ szjymesinfo.ljcgbs || 0 }}
              </p>
              <div class="gridimg"></div>
              <p class="fontstyle2">累计采购笔数</p>
            </div>
          </div>
        </div>
      </div>
      <div class="maindivsamll" style="width: 77%">
        <div class="zbjefxfgs">
          <div
            style="
              display: flex;
              align-items: center;
              position: absolute;
              left: 4%;
              top: -4%;
              z-index: 9;
            "
          >
            <div class="szjytitle">
              <div class="szjytitletext"></div>
              <p>中标金额分析</p>
              <!-- <div class="jiantoudatepiacker">
                <YYDatePick
                  v-model="zbjefxdatepicker"
                  :to-body="false"
                  type="year"
                  :popper-options="{ placement: 'bottom' }"
                  arrow 
                ></YYDatePick>
              </div> -->
              <div class="style1">
                <dataPicker
                  v-model="zbjefxdatepicker"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择"
                  :editable="false"
                  prefix-icon="1"
                />
              </div>
            </div>
          </div>
          <Echart
            id="yearmoneyfgs"
            :options="yearmoneyfgsoptions"
            height="100%"
            width="100%"
          ></Echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Echart from "@/common/echart";
import { yearDate } from "@/utils/common";
import * as echarts from "echarts";
import YYDatePick from "@/components/YYDatePicker";
import Swiper from "swiper/bundle";
import dataPicker from "@/components/datePicker/index.js";
export default {
  props: {},
  components: {
    Echart,
    YYDatePick,dataPicker
  },
  data() {
    return {
      radioV: "1",
      yearmoneyfgsoptions: {},
      gdwcgqkdatepicker: yearDate(),
      zbjefxdatepicker: yearDate(),
      szjymesinfo: { ljcgje: 0, ljcgbs: "" },
    };
  },
  watch: {
    gdwcgqkdatepicker(newVal, oldVal) {
      if (!newVal) {
        this.gdwcgqkdatepicker = yearDate();
      }
      this.getbuyingSituationAnalysis();
    },
    zbjefxdatepicker(newVal, oldVal) {
      if (!newVal) {
        this.zbjefxdatepicker = yearDate();
      }
      this.getyearSonConditionAnalysis(2);
    },
  },
  computed: {},
  mounted() {
    this.getbuyingSituationAnalysis();
    this.getyearSonConditionAnalysis(1);
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);

      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
    getbuyingSituationAnalysis() {
      APIS.Szjy.buyingSituationAnalysis({
        year: this.gdwcgqkdatepicker,
      }).then((res) => {
        // this.szjymesinfo.ljcgje = (res.data.totalPrice / 100000000).toFixed(2);
        this.szjymesinfo.ljcgje = this.returnFloat(
          res.data.totalPrice / 100000000
        );
        console.log(
          this.returnFloat(res.data.totalPrice / 100000000),
          "00000000)"
        );
        this.szjymesinfo.ljcgbs = res.data.num;
      });
    },
    getyearSonConditionAnalysis(num) {
      let xgdwcgedata = [];
      let ygdwcgedata = [];
      APIS.Szjy.yearBiddingAnalysis({ year: this.zbjefxdatepicker }).then(
        (res) => {
          if (res.data) {
            res.data.map((item, index) => {
              xgdwcgedata.push(item.MONTH);
              ygdwcgedata.push(this.returnFloat(item.totalprice / 100000000));
              // ygdwcgedata.push((item.totalprice / 100000000).toFixed(2));
            });
            if (num == 1) {
              this.renderyearmoneyfgsoptions(xgdwcgedata, ygdwcgedata);
            } else {
              let myChart = echarts.init(
                document.getElementById("yearmoneyfgs")
              );
              myChart.setOption({
                xAxis: {
                  data: xgdwcgedata,
                },
                series: [
                  {
                    data: ygdwcgedata,
                  },
                ],
              });
            }
          }
        }
      );
    },
    renderyearmoneyfgsoptions(xdata, arr1, labelstyle, labels) {
      labelstyle = {
        show: true,
        interval: 0,
        // 更改x轴文字颜色的配置
        textStyle: {
          color: "#333333", //处理x轴的文字颜色【粉色】
        },
      };
      labels = {
        show: true,
        position: "top",
        textStyle: {
          color: "black",
          fontSize: 10,
        },
      };

      this.yearmoneyfgsoptions = {
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          formatter(params) {
            for (let x in params) {
              return (
                params[x].marker +
                params[x].name +
                "月:    " +
                params[x].data +
                "亿元"
              );
            }
          },
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: labelstyle,
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "累计采购金额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#182c56",
                label: labels,
              },
            },
            data: arr1,
          },
        ],
      };
    },
    changeradio() {
      let myChart = echarts.init(document.getElementById("yearmoneyfgs"));
      if (this.radioV == "1") {
        this.radioV = "2";
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  color: "#182c56",
                  label: {
                    show: false,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      } else {
        this.radioV = "1";
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  color: "#182c56",
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      }
    },
  },
};
</script>
 
<style lang="scss" scoped>
.szjjsecongpagefencompanydialog {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .maindiv {
    height: 92%;
    display: flex;
    .maindivsamll {
      width: 50%;
      height: 100%;
      .szjytitle {
        display: flex;
        align-items: center;
        .szjytitletext {
          width: 0px;
          height: 0.95rem;
          border: 0.1rem solid #192c55;
          margin-right: 0.25rem;
        }
      }
    }
  }
  .szjyleftbottomechartheight {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .zbjefxfgs {
    height: 90%;
    width: 95%;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../assets/szjyfgsbbtnbg2.png");
  }
}

::v-deep .style1 {
  height: 1.4rem;
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.6rem);
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    display: none;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
    height: 1.2rem;
  }
}
</style>
 

